<template>
  <div>
    <div class="el-card zk-searcher">
      <el-row>
        <el-col :span="20">
          <el-form :inline="true" :model="formInline">
            <el-col :span="8">
              <el-form-item label="项目名称">
                <el-input v-model="formInline.project_name" size="small" placeholder="请输入项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作名称">
                <el-input v-model="formInline.work_name" size="small" placeholder="请输入工作名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务名称">
                <el-input v-model="formInline.task_name" size="small" placeholder="请输入任务名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完成部门">
                <el-select v-model="formInline.done_person_dept_name" size="small" placeholder="请选择完成部门">
                  <el-option
                    v-for="item in bumen"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批人">
                <el-input v-model="formInline.sp_person_name" size="small" placeholder="请输入审批人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批状态">
                <el-select v-model="formInline.sp_state" size="small" placeholder="请选择审批状态">
                  <el-option
                    v-for="item in zhuangtai"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="完成时间">
                <el-date-picker
                  v-model="formInline.time"
                  type="daterange"
                  size="small"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
        <el-col :span="4">
          <div class="submit-btn">
            <el-button type="primary" size="medium" @click="search">查询</el-button>
            <el-button size="medium" plain @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="zk-table">
      <div class="top-bar">
        <div class="left">
          <div class="table-description"> 审批记录列表</div>
        </div>
        <div class="right">
          <!-- <slot name="right-top" />
          <el-button
            v-if="hasAddAction"
            icon="el-icon-plus"
            type="primary"
            plain
            size="medium"
            @click="defaultActionOptions.add.func()"
          >{{ defaultActionOptions.add.text }}
          </el-button> -->
        </div>
      </div>
      <div class="tablebox">
        <el-table
          ref="multipleTable"
          class="flex-1 mt-20"
          :data="tableData"
          tooltip-effect="dark"
          stripe
          row-class-name="row-class-name"
          cell-class-name="cell-class-name"
          header-row-class-name="header-row-class-name"
          header-cell-class-name="header-cell-class-name"
          style="width:100%"
          height="100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column show-overflow-tooltip prop="project_name" label="项目名称" />
          <el-table-column show-overflow-tooltip prop="work_name" label="工作名称" />
          <el-table-column show-overflow-tooltip prop="task_name" label="任务名称" />
          <el-table-column show-overflow-tooltip prop="done_person_name" label="完成人" />
          <el-table-column show-overflow-tooltip prop="done_person_dept_name" label="完成部门" />
          <el-table-column show-overflow-tooltip prop="done_time" label="完成时间" />
          <el-table-column show-overflow-tooltip prop="sp_level_desc" label="审批批次" />
          <el-table-column show-overflow-tooltip prop="sp_person_name" label="审批人" />
          <el-table-column show-overflow-tooltip prop="sp_dept_name" label="审批人部门" />
          <el-table-column show-overflow-tooltip prop="sp_time" label="审批时间" />
          <el-table-column show-overflow-tooltip prop="sp_state_desc" label="审批结果" />
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100 , 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageSizeChange"
          @current-change="currentPageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import api from '@/api/api'

  export default {
    name: "task-approval.vue",
    components: {},
    props: {},
    data() {
      return {
        tableData: [],
        currentPage: 0,
        total: 1,
        pageSize: 10,
        multipleSelection: '',//批量
        idList: '',
        formInline: {
          project_name: '',
          work_name: '',
          task_name: '',
          done_person_dept_name: '',
          sp_person_name: '',
          sp_state: '',
          time: '',
        },
        bumen: [],
        zhuangtai: [{
          value: '',
          label: '全部'
        }, {
          value: '0',
          label: '待审批'
        }, {
          value: '1',
          label: '审批通过'
        }, {
          value: '2',
          label: '驳回'
        }],
      }
    },
    computed: {},
    watch: {},
    methods: {
      handleSelectionChange() {
      },
      handleEdit(index, row) {

      },
      pageSizeChange() {
      },
      currentPageChange() {
      },
      getdeplist() {
        api.get['/rest/rptSp/queryDoneDeptList']()
          .then(({ data }) => {
            if (!data) return
            this.bumen = data.data
          })
      },
      getdata() {
        if (this.formInline.done_person_dept_name == undefined) {
          this.formInline.done_person_dept_name = ''
        }
        api.get['/rest/rptSp/queryHisSpLogList'](this.formInline.project_name, this.formInline.work_name, this.formInline.task_name, this.formInline.done_person_dept_name, this.formInline.sp_person_name, this.formInline.sp_state, this.formInline.time[0], this.formInline.time[1], this.pageSize, this.currentPage)
          .then(({ data }) => {
            if (!data) return
            console.log(data)
            this.tableData = data.data.payload.list
            this.total = data.data.payload.total
          })
      },
      //搜索
      search() {
        this.currentPage = 0
        this.getdata()
      },
      //重置
      reset() {
        this.formInline.project_name = ''
        this.formInline.work_name = ''
        this.formInline.task_name = ''
        this.formInline.done_person_dept_name = ''
        this.formInline.sp_person_name = ''
        this.formInline.sp_state = ''
        this.formInline.time = ''
        this.pageSize = 10
        this.currentPage = 0
        this.getdata()
      },
    },
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
      this.getdeplist()
      this.getdata()
    },
    activated() {
    },
    deactivated() {
    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    },
    errorCaptured() {
    },
    beforeRouteEnter(to, from, next) {
      next()
    },
    beforeRouteUpdate(to, from, next) {
      next()
    },
    beforeRouteLeave(to, from, next) {
      next()
    }
  }
</script>
<style lang="scss" scoped>
  @import "~@/assets/css/_variables.scss";

  .zk-searcher {
    position: relative;
    overflow: unset;
    padding: 20px 20px 2px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .submit-btn {
      position: absolute;
      bottom: 18px;
      right: 20px;
    }

    .submit-btn {
      text-align: center;
    }

    .el-form-item.el-form-item--small {
      white-space: nowrap;
    }
  }

  .zk-table {
    padding: 30px 40px 0;
    margin-top: 10px;
    background: white;
    padding-bottom: 10px;
    width: 100%;

    .top-bar {
      display: flex;
      justify-content: space-between;
    }

    .table-description {
      font-size: 16px;
      color: #3a404c;
      letter-spacing: 2px;
      font-weight: 600;
    }

    .table-description:before {
      vertical-align: bottom;
      margin-right: 10px;
      display: inline-block;
      width: 3px;
      height: 16px;
      border-radius: 3px;
      background-color: #4c81f6;
      content: ' ';
    }

    .tablebox {
      width: 100%;
      height: 630px;
      max-height: 800px;
    }
  }

  .cursor {
    cursor: pointer;
    color: #4474dd;
  }

  .centerbox {
    width: 95%;
    height: auto;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
  }
</style>
